// index.js
// 获取应用实例
const app = getApp()
// 引入qqmapsdk 
const QQMapWX = require('../../libs/qqmap-wx-jssdk')
let qqmapsdk = new QQMapWX({key : 'A7CBZ-FZ73U-PUPV7-BINEG-ICD57-KAB6J'})

Page({

  data: {
    movies: [],
    cid: 1,    // 保存当前顶部导航选中项的类别id
    cityname: '未选择'
  },

  /** 点击顶部导航后触发 */
  tapNav(event){
    let id = event.target.dataset.id
    this.setData({cid: id})
    // 先去缓存中找一找, 看看能不能拿到数据
    wx.getStorage({key: id}).then(
    (res)=>{ // 找得到
      // console.log(movies)
      this.setData({movies: res.data})
    }, 
    (err)=>{ // 找不到
      this.loadData(id, 0).then(movies=>{
        this.setData({movies})
        wx.setStorage({  // 存入缓存
          key: this.data.cid,
          data: movies
        })
      })
    })
  },

  /**
   * 通过类别id与下标索引，查询相应电影列表
   * @param {number} cid    类别ID
   * @param {number} offset 开始读取数据条目的下标
   * @returns Promise  通过promise返回电影列表数据
   */
  loadData(cid, offset){
    return new Promise((resolve, reject)=>{
      // 弹出等待框
      wx.showLoading({
        title: '加载中,请稍后...',
        mask: true
      })

      // 执行异步任务
      wx.request({
        url: "https://api.tedu.cn/index.php",
        method: "GET",
        data: {cid, offset},
        success: (res)=>{
          // 响应获取后回调resolve方法将结果交给loadData的调用者处理
          // resolve中到底会做什么, 要看loadData方法调用者在then
          // 语句中实现了什么.
          resolve(res.data)  
          wx.hideLoading()
        },
        fail: (err)=>{
          reject(err)
        }
      })
    })
  },

  /** 加载当前定位 */
  getLocation(){
    qqmapsdk.reverseGeocoder({
      success:(res)=>{
        let cityname=res.result.address_component.city
        this.setData({cityname:cityname})
        // 将cityname 存入globalData
        getApp().globalData.cityname = cityname
      },
      fail: (err)=>{
        console.warn(err)
      }
    })
  },

  /** 页面加载完毕后执行 */
  onLoad() {
    // 加载当前定位
    this.getLocation()

    // 发请求加载热映类别下的首页数据
    this.loadData(1, 0).then(movies=>{
      this.setData({movies})
    })
  }, 

  onShow(){
    // 从globalData中获取cityname
    let cityname = getApp().globalData.cityname
    this.setData({cityname})
  },

  /** 在页面滚动到底部后自动调用 */
  onReachBottom(){
    let cid = this.data.cid
    let offset = this.data.movies.length
    console.log(
      `加载下一页: cid:${cid} offset:${offset}`)
    this.loadData(cid, offset).then(movies=>{
      // 追加到旧数组末尾
      this.data.movies.push(...movies)
      this.setData({movies: this.data.movies})
    })
  },

  /** 监听下拉刷新  更新当前电影列表 更新缓存 */
  onPullDownRefresh(){
    console.log('pulldown refresh')
    this.loadData(this.data.cid, 0).then(movies=>{
      this.setData({movies})  
      // 调用微信API结束下拉刷新效果
      wx.stopPullDownRefresh()
      // 将得到的结果更新到缓存中
      wx.setStorage({
        key: this.data.cid+"",
        data: movies
      })
    })
  }

})
